<template>
  <div class="userInfo">
    <div style="padding-left: 20px;">
      <div class="account-header">
        <div><img src="~@assets/images/myStudy-logo.png" alt=""></div>
        <div>
          <h3>欢迎您，{{$store.state.user.name}}</h3>
          <!-- <p>甘肃省专业技术人员</p>
		   <p>继续教育网络学习平台</p>-->
        </div>
      </div>
      <ul class="account-nav clearfix">
        <li @click="toUrl('/studyspace/my-trainclass')"><img
          src="~@assets/images/account-book.png" alt="">我的学习
        </li>
        <li @click="toCertificate" v-if="$store.state.app.footer.webTemplateType && $store.state.app.footer.webTemplateType.indexOf('V4') == -1 && $store.state.app.footer.certificateExternalLinks">
          <img src="~@assets/images/account-certificate.png" alt="">我的证书
        </li>
        <li @click="toCertificate" v-if="$store.state.app.footer.webTemplateType && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1 && !recordFlag">
          <img src="~@assets/images/account-certificate.png" alt="">我的证书
        </li>
        <li @click="toUrl('/studyspace/my-record')" v-if="$store.state.app.footer.webTemplateType && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1 && recordFlag">
          <img src="~@assets/images/account-certificate.png" alt="">我的证书
        </li>
        <li @click="toUrl('/studyspace/my-order')">
          <img src="~@assets/images/account-order.png" alt="">我的订单
        </li>
        <li @click="toUrl('/studyspace/my-required-course?type=userInfo')">
          <img src="~@assets/images/account-person.png" alt="">我的资料
        </li>
      </ul>
      <p class="tip" >
        <span v-if="!$store.state.app.footer.wechatQrCodePath">手机浏览器直接访问网站无效!</span>
      </p>
    </div>
    <div class="account-sweep clearfix">
      <div v-if="$store.state.app.footer.htmlErCodePath || $store.state.app.footer.wechatQrCodePath">
        <img class="H52" v-if="$store.state.app.footer.wechatQrCodePath" :src="$store.state.app.footer.wechatQrCodePath" alt="">
        <img class="H51" v-if="$store.state.app.footer.htmlErCodePath && !$store.state.app.footer.wechatQrCodePath" :src="$store.state.app.footer.htmlErCodePath" alt="">
        <p>扫描上方二维码进入
          <span v-if="$store.state.app.footer.wechatQrCodePath">微信学习</span>
          <span v-if="$store.state.app.footer.htmlErCodePath && !$store.state.app.footer.wechatQrCodePath">H5</span>
        </p>
      </div>
      <div v-if="$store.state.app.footer.appErCodePath">
        <img :src="$store.state.app.footer.appErCodePath" alt="">
        <p> 扫描上方二维码下载<span>APP</span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import {getMenu} from "@/api/studyspace"
  export default {
    name: "userInfo",
    components: {},
    data() {
      return {
        list:[],
        recordFlag:false,
        certificateFlag:false,

      }
    },
    methods: {
      toUrl(path){
        this.$router.push(path)
      },
      toCertificate(){
        if (this.$store.state.app.footer.certificateExternalLinks) {
          window.open(this.$store.state.app.footer.certificateExternalLinks, '_blank');
        }else if (this.certificateFlag) {
          this.toUrl('/studyspace/my-certificate')
        }else {
          window.open(this.$router.resolve({
            path: '/certificate'
          }).href, '_blank');
        }
      },
      getMenuList(){
        getMenu().then((response) =>{
          this.list = response.data;
          this.list && this.list.forEach((item,index) =>{
            if (item.elementUrl.indexOf('my-record') !== -1){
              this.recordFlag = true;
            }
            if (item.elementUrl.indexOf("my-certificate") !== -1 ) {
              this.certificateFlag = true;
            }
          });

        }).catch((err) =>{
          this.$message.error(err.message)
        });
      }
    },
    mounted() {
      this.getMenuList();
    },
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "userInfo";
</style>
